<template>
  <tabs type="beforeline" position="top" :isLazyRender="true" :activeName="'properts'">
    <tabs-item title="属性" :name="'properts'">
      <CPRender
        :key="key"
        :cpr="property.component"
        :value="property.properts"
        :properts="property.properts"
        :layout="property.layout"
        :events="property.events"
        :resource="property.resource"
        :theme="property.theme"
        :childComponents="property.childComponents"
        @update="handleUpdate"
        ref="properts">
      </CPRender>
    </tabs-item>
    <tabs-item title="布局" :name="'layout'">
      <FormGroup label="左距比例" :col="11">
        <FormInput v-model="property.layout.x" />
      </FormGroup>
      <FormGroup label="上距比例" :col="11">
        <FormInput v-model="property.layout.y" />
      </FormGroup>
      <FormGroup label="宽度比例" :col="11">
        <FormInput v-model="property.layout.w" />
      </FormGroup>
      <FormGroup label="高度比例" :col="11">
        <FormInput v-model="property.layout.h" />
      </FormGroup>
      <FormGroup label="层级" :col="11">
        <FormInput v-model="property.layout.zIndex" inputType="number" />
      </FormGroup>
    </tabs-item>
    <tabs-item title="事件" :name="'events'">
      <FormGroup label="created" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
        <CoderEntry v-model="property.events.created" height="94vh" />
      </FormGroup>
      <FormGroup label="beforeMount" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
        <CoderEntry v-model="property.events.beforeMount" height="94vh" />
      </FormGroup>
      <FormGroup label="mounted" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
        <CoderEntry v-model="property.events.mounted" height="94vh" />
      </FormGroup>
      <FormGroup label="beforeDestroy" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
        <CoderEntry v-model="property.events.beforeDestroy" height="94vh" />
      </FormGroup>
      <FormGroup label="destroyed" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
        <CoderEntry v-model="property.events.destroyed" height="94vh" />
      </FormGroup>
    </tabs-item>
    <tabs-item title="主题" :name="'theme'">
    </tabs-item>
    <tabs-item title="资源" :name="'resource'" className="coder-group">
      <div class="d-container">
        <div class="d-section d-pull-clear d-caption-lead">执行资源<span class="d-text-lightgray d-text-small">(在组件初始后(created)执行)</span></div>
        <FormGroup label="JavaScript" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
          <CoderEntry v-model="property.resource.js" height="94vh" />
        </FormGroup>
        <FormGroup label="CSS" :col="12" labelPosition="left" labelAlign="right" labelPadding="0 12px" labelWidth="120px">
          <CoderEntry v-model="property.resource.css" language="css" height="94vh" />
        </FormGroup>
        <div class="d-section d-pull-clear d-caption-lead d-layout-flex-between-center">
          <span>引用资源<span class="d-text-lightgray d-text-small">(在组件初始后(created)执行)</span></span>
          <span @click="handleAddFile" class="d-text-primary d-text-linker" title="添加资源"><i class="el-icon-plus"></i></span>
        </div>
        <div class="d-section">
          <Grid v-model="files" ref="gridList" :isPagerAble="false">
            <GridColumn :width="45" type="index" label="序号" className="d-vm" />
            <GridColumn field="type" label="类型" width="120">
              <template v-slot:body="scope">
                <select v-model="scope.type" class="d-form-select">
                  <option v-for="item in types" :value="item.type" :key="item.type">{{ item.text }}</option>
                </select>
              </template>
            </GridColumn>
            <GridColumn field="url" label="地址">
              <template v-slot:body="scope">
                <FormInput v-model="scope.url" :title="scope.url" />
              </template>
            </GridColumn>
            <GridColumn field="action" :width="60" label="操作" className="d-vm">
              <template v-slot:body="scope">
                <div class="d-bar-tools d-bar-tools-condensed d-grid-actions">
                  <a @click="handleDelFile(scope)" class="d-tools-item d-text-theme"><DeleteIcon size="sm" /></a>
                </div>
              </template>
            </GridColumn>
          </Grid>
        </div>
      </div>
    </tabs-item>
  </tabs>
</template>

<script>
import elementResizeDetectorMaker  from 'element-resize-detector'
import { strer } from '@daelui/dogjs/dist/components.js'
import { Paner, Tabs, TabsItem, FormGroup, FormInput, FormButton, Grid, GridColumn } from '@daelui/vdog/dist/components.js'
import { Coder, CoderEntry } from '@daelui/vdog/dist/coder.js'
import { DeleteIcon } from '@daelui/vdog/dist/icons.js'
import CPRender from '../cprender.vue'
import stock from '@/service/stock/index'

export default {
  components: {
    Paner,
    Tabs,
    TabsItem,
    Coder,
    CoderEntry,
    CPRender,
    FormGroup,
    FormInput,
    FormButton,
    Grid,
    GridColumn,
    DeleteIcon
  },

  props: {
    stock: {
      type: Object,
      default () {
        return stock
      }
    }
  },

  data () {
    return {
      // 属性面板状态
      property: {
        component: {
          component: 'div'
        },
        properts: {},
        events: {},
        resource: {},
        theme: {},
        layout: {
          x: 0,
          y: 0,
          w: 16,
          h: 16
        }
      },
      // 组件标识key
      key: '',
      types: [
        { type: 'script', text: 'JavaScript' },
        { type: 'link', text: 'CSS' }
      ],
      // 文件列表
      files: [
        // { id: strer.utid(), url : '', type: 'script' }
      ]
    }
  },

  watch: {
    // 选择的组件更新
    'stock.state.selectedComponent': {
      handler () {
        this.handleUpdateSelectedComponent()
      },
      deep: true
    },
    // 事件更新
    'property.properts': {
      handler () {
        let selectedComponent = this.stock.state.selectedComponent
        this.$set(selectedComponent, 'properts', this.property.properts || {})
      },
      deep: true
    },
    // 布局更新
    'property.layout': {
      handler () {
        let selectedComponent = this.stock.state.selectedComponent
        this.$set(selectedComponent, 'layout', this.property.layout || {})
      },
      deep: true
    },
    // 事件更新
    'property.events': {
      handler () {
        let selectedComponent = this.stock.state.selectedComponent
        this.$set(selectedComponent, 'events', this.property.events || {})
      },
      deep: true
    },
    // 资源更新
    'property.resource': {
      handler () {
        let selectedComponent = this.stock.state.selectedComponent
        this.$set(selectedComponent, 'resource', this.property.resource || {})
      },
      deep: true
    }
  },

  methods: {
    // 属性更新
    handleUpdate (data) {
      this.$set(this.property, 'properts', data || {})
      this.$emit('update', data)
    },
    // 更新属性
    handleUpdateSelectedComponent () {
      let selectedComponent = this.stock.state.selectedComponent
      if (!selectedComponent || !selectedComponent.name) {
        return
      }
      // 组件属性视图
      this.$set(this.property, 'component', {
        name: selectedComponent.name,
        version: selectedComponent.version,
        isProperty: true
      })
      // 属性
      this.$set(this.property, 'properts', selectedComponent.properts || {})
      // 布局
      this.$set(this.property, 'layout', selectedComponent.layout || {
        x: 0,
        y: 0,
        w: 16,
        h: 16
      })
      // 事件
      this.$set(this.property, 'events', selectedComponent.events || {})
      // 主题
      this.$set(this.property, 'theme', selectedComponent.theme || {})
      // 资源
      this.$set(this.property, 'resource', selectedComponent.resource || {})
      this.property.resource.files = Array.isArray(this.property.resource.files) ? this.property.resource.files : []
      this.files = this.property.resource.files

      this.key = selectedComponent.id || strer.utid()
    },
    // 添加文件
    handleAddFile () {
      this.files.push({
        id: strer.utid(),
        url: '',
        type: 'script'
      })
    },
    // 删除文件
    handleDelFile (item) {
      this.files = this.files.filter(node => {
        return item !== node
      })
    }
  },

  mounted () {
    this.handleUpdateSelectedComponent()
    // 监听元素变化，编辑器自适应
    let erd = elementResizeDetectorMaker()
    erd.listenTo(this.$el, () => {
      for (let key in this.$refs) {
        if (/coder/.test(key)) {
          let monacoEditor = this.$refs[key].monacoEditor
          monacoEditor && monacoEditor.layout()
        }
      }
    })
  }
}
</script>

<style lang="less" scoped>
.layout-gauge {
  display: grid;
  grid-template-areas: '. . .';
  max-width: 200px;
  grid-gap: 4px;
  /deep/ .d-form-input {
    text-align: center;
  }
}
</style>
